﻿@{
    ViewData["Title"] = "个人信息维护";
}
<h2>个人信息维护</h2>
<hr />
<div class="btn-group">
    <button class="btn btn-link" onclick="dlgChangePassword()">更改密码</button>
    <button class="btn btn-link" onclick="dlgChangeEmail()">更改邮箱</button>
    <button class="btn btn-link" onclick="dlgChangeMobile()">更改手机</button>
    <button class="btn btn-link" onclick="dlgChangeDisplayName()">更改显示名</button>
    <button class="btn btn-link" onclick="dlgChangeOther()">更改其他信息</button>
    <style>
        #UploadFile { font-size: 12px; overflow: hidden; position: absolute }
        #IconFile { position: absolute; z-index: 100; margin-left: -180px; font-size: 60px; opacity: 0; filter: alpha(opacity=0); margin-top: -5px; }
    </style>
    <span id="UploadFile">
        <input type="file" id="IconFile" size="1" onchange="changeUserIcon()">
        <a class="btn btn-link" href="#">更改头像</a>
    </span>
    <script>
        function changeUserIcon() {
            var data = new FormData();
            var fileUpload = $("#IconFile").get(0);
            var file = fileUpload.files[0];
            data.append(file.name, file);
            /**/
            AjaxSendForm("POST", "/Account/ChangeUserIcon", data, function (result) { if (result = true) window.location.reload(); else SysWarning(data); });
/**/
    }
    </script>
</div>
<div class="modal fade" id="passwordDialog" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="ModalLabel">更改密码</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <span>更新口令</span>
                    <input id="InputPassword" class="form-control" type="password" onchange="inputPassword()" />
                    <span id="CheckPassword" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <span>验证口令</span>
                    <input class="form-control" type="password" id="ConfirmPassword" onchange="checkPassword()" />
                    <span id="CheckConfirm" class="text-danger"></span>
                </div>
            </div>
            <div class="modal-footer">
                <div class="input-group">
                    <span class="input-group-btn">
                        <a class="btn btn-default" onclick="changePassword()">重新设置</a>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    function dlgChangePassword() { $('#InputPassword').val("");$('#ConfirmPassword').val("");$('#passwordDialog').modal('show');}
    function inputPassword() {
        var regex = new RegExp("@ViewBag.PWDRegex.Replace("\\", "\\\\")", "g");
        if (!regex.test($('#InputPassword').val())) $("#CheckPassword").text("@ViewBag.PWDRequirement");
        else $("#CheckPassword").text("");
    }
    function checkPassword() {
        if ($('#InputPassword').val() != $('#ConfirmPassword').val()) $("#CheckConfirm").text("密码录入不一致！");
        else $("#CheckConfirm").text("");
    }
    function changePassword() {
        inputPassword(); checkPassword(); if ($("#CheckPassword").text() != "") return; if ($("#CheckConfirm").text() != "") return;
        var data = { "Password": $("#InputPassword").val() }
        AjaxPostData("/Account/ChangePassword", data, function (result) { if (result) $('#passwordDialog').modal('hide'); });
    }
</script>
<div class="modal fade" id="emailDialog" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="ModalLabel">更改邮箱</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <span>邮箱</span>
                    <input id="InputEmail" class="form-control" type="email" onchange="inputEmail()" />
                    <span id="CheckEmail" class="text-danger"></span>
                </div>
            </div>
            <div class="modal-footer">
                <div class="input-group">
                    <span class="input-group-btn">
                        <a class="btn btn-default" onclick="changeEmail()">重新设置</a>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    function dlgChangeEmail() { $('#InputEmail').val("");$('#emailDialog').modal('show');}
    function inputEmail() {
        var regex = new RegExp(/^(\w-*\.*)+@@(\w-?)+(\.\w{2,})+$/);
        if (!regex.test(($('#inputEmail').val()))) $("#CheckEmail").text("邮箱格式不正确！");
        else $("#CheckEmail").text("");
    }
    function changeEmail() {
        inputEmail(); if ($("#CheckEmail").text() != "") return;
        var data = { "Email": $("#inputEmail").val() }
        AjaxPostData("/Account/ChangeEmail", data, function (result) { if (result) $('#emailDialog').modal('hide'); });
    }
</script>
<div class="modal fade" id="mobileDialog" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="ModalLabel">更改手机</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <span>手机</span>
                    <input id="InputMobile" class="form-control" type="number" onchange="inputMobile()" />
                    <span id="CheckMobile" class="text-danger"></span>
                </div>
            </div>
            <div class="modal-footer">
                <div class="input-group">
                    <span class="input-group-btn">
                        <a class="btn btn-default" onclick="changeMobile()">重新设置</a>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    function dlgChangeMobile() { $('#InputMobile').val("");$('#mobileDialog').modal('show');}
    function inputMobile() {
        var regex = new RegExp(/^(\w-*\.*)+@@(\w-?)+(\.\w{2,})+$/);
        if (!regex.test(($('#InputMobile').val()))) $("#CheckMobile").text("邮箱格式不正确！");
        else $("#CheckMobile").text("");
    }
    function changeMobile() {
        inputMobile(); if ($("#CheckMobile").text() != "") return;
        var data = { "Mobile": $("#InputMobile").val() }
        AjaxPostData("/Account/ChangeMobile", data, function (result) { if (result) $('#mobileDialog').modal('hide'); });
    }
</script>
<div class="modal fade" id="displayNameDialog" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="ModalLabel">更改显示名</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <span>显示名</span>
                    <input id="InputDisplayName" class="form-control" type="text" onchange="inputDisplayName()" />
                    <span id="CheckDisplayName" class="text-danger"></span>
                </div>
            </div>
            <div class="modal-footer">
                <div class="input-group">
                    <span class="input-group-btn">
                        <a class="btn btn-default" onclick="changeDisplayName()">重新设置</a>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    function dlgChangeMobile() { $('#InputDisplayName').val(""); $('#displayNameDialog').modal('show'); }
    function inputDisplayName() {
        if ($('#InputDisplayName').val() == "") $("#CheckDisplayName").text("显示名称不允许为空！");
        else $("#CheckDisplayName").text("");
    }
    function changeDisplayName() {
        var data = { "DisplayName": $("#InputDisplayName").val() }
        /**/
        AjaxPostData("/Account/ChangeDisplayName", data, function (result) { if (result) $('#displayNameDialog').modal('hide'); });
/**/
}
</script>

@section Scripts {
    @await Html.PartialAsync("_ValidationScriptsPartial")
}
